Here is the code im using, here are the errors in console output:
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
[Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, Number, got Array
<a-select
option-filter-prop="children"
>
<a-select-option
v-for="(item, i) in branch"
:key="i"
:value="item.branches"
>
<span>{{ item.title }}</span>
</a-select-option>
</a-select></a-col
>
</a-row>
i've also tried: :key="${++i}-${branch}"
and the warn still pops up
in the same file i iterate the same array but for another purpose. it should not make a difference, should not?
<Collapse v-for="(item, index) in branch" :key="++index">
<a-collapse-panel :header="item.title">
<Collapse v-for="(foo, inde) in item.branches" :key="inde">
<a-collapse-panel :header="foo.title">
<a-row>
<a-col>
<p>{{ foo.title }}</p>
</a-col>
<a-col>
<p>Hello world</p>
</a-col>
</a-row>
</a-collapse-panel>
</Collapse>
</a-collapse-panel>
</Collapse>
quick pd: The error shows 15 times, the same amount of objects i have in branches
branch content:
"region": [
{
"title": "xxxxxx",
"branches": [
{
"title": "xxxxx",
"description": "xxxxxxx",
"link": "xxxxxxxxxxxxxx"
}
]
},
]
So i was using ant design for vue.. this framework comes with a component named a-select.. this comes with a function: @change="handleChange", this receives a node..
So i could not assign to value an object, is has to be a string or a num, even tho the error was not directing me to value, it was directing me to "Key".
this.titles = res.subsidiary.region.map((e) => e.title)
i had to map title
<a-select-option
v-for="(title, i) in titles"
:key="i"
:value="title"
>
iterate title...
and in methods i did this:
methods: {
handleChange(_, node) {
this.show = this.branch[node.key].branches
},
},
depending on the node you are, you are going to look for the ""branch"" that belongs to the node itself. so shows has the branch that i want to show.
Thanks to @Fabian Skarmeta for the help.